<template>
  <div id="collect">
    <div class="collect-main">
      <div class="title">
        <HomeTitle title="我的收藏" Eng="My Collections"></HomeTitle>
      </div>
      <div class="content">
        <myLoading v-if="loading" />

        <el-table :data="collect.list" v-else header-cell-class-name="tableColor" cell-class-name="tableColor">
          <el-table-column type="index" :index="calcIndex" width="80"></el-table-column>
          <el-table-column
            label="图片名称"
            prop="PictureName"
          ></el-table-column>
          <el-table-column
            label="图片描述"
            prop="Description"
          ></el-table-column>
          <el-table-column label="图片" prop="Description">
            <template #default="s">
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 150px;
                  height: 150px;
                "
              >
                <el-image
                  :src="baseApi + s.row.WatermarkFileUrl"
                  preview-teleported
                  :preview-src-list="[baseApi + s.row.WatermarkFileUrl]"
                  z-index="9999"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="s">
              <el-button type="text" style="color: red" @click="del(s.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as CollectApi from "@/api/collect";
import HomeTitle from "@/components/title.vue";
import { ElMessageBox, ElNotification } from "element-plus";
import { storeUser } from "@/store/user";
export default {
  name: "",
  components: {
    HomeTitle,
  },
  setup(props, ctx) {
    const user = storeUser();
    const loading = ref(false);
    const collect = reactive({
      list: [],
      count: 0,
      select: [],
    });
    const params = reactive({
      CurrentUserAccount: user.UserAccount,
      PageSize: 5,
      PageIndex: 1,
    });
    const init = async () => {
      loading.value = true;
      let { data } = await CollectApi.getList(params);
      loading.value = false;
      collect.list = data.UserData.PicList;
      collect.count = data.UserData.Count;
    };
    onMounted(() => {
      init();
    });
    const del = async (v) => {
      ElMessageBox.confirm("确认删除该收藏？", "删除", {
        type: "warning",
      }).then(async () => {
        let { data } = await CollectApi.cancel({
          CurrentUserAccount: user.UserAccount,
          PictureIDs: v.PictureID,
        });
        if (data.Status != 0) return;
        ElNotification({
          type: "success",
          title: "删除",
          message: "删除成功！",
        });
        init();
      });
    };
    const handleSelectionChange = (v) => {
      collect.select = v;
    };
    const calcIndex = (index) => {
      return (params.PageIndex - 1) * params.PageSize + index + 1;
    };
    return {
      calcIndex,
      loading,
      collect,
      del,
      handleSelectionChange,
    };
  },
};
</script>

<style scoped lang="scss">
::v-deep(.el-table) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-table tr) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-table__cell) {
  background: transparent !important;
  color: #fff !important;
}
#collect {
  position: relative;
  width: 100%;
  height: 100%;
  border-top-left-radius: 30px;
  overflow-y: auto;
  background: var(--box-bg-color);

  .collect-main {
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .title {
      margin-bottom: 20px;
    }
    .content {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .el-table {
        flex: 1;
      }
    }
  }
}
</style>
